<template>
  <div class="guidePages">
    <swiper height="100vh" >
      <swiper-item class="black">
        <img src="../../images/home/guidePages1.jpg" alt="" class="animated">
      </swiper-item>
      <swiper-item class="black">
         <img src="../../images/home/guidePages2.jpg" alt="" class="animated">
      </swiper-item>
      <swiper-item class="black">
       <button-tab>
        <button-tab-item selected @on-item-click="jump()">开始找房</button-tab-item>
      </button-tab>
         <img src="../../images/home/guidePages3.jpg" alt="" class="animated">
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
  import { Swiper, SwiperItem, ButtonTab, ButtonTabItem } from 'vux'
  export default {
    components: {
      Swiper,
      SwiperItem,
      ButtonTabItem,
      ButtonTab
    },
    data () {
      return {
      }
    },
    // created () {
    //   this.$nextTick(function () {
    //     window.localStorage.setItem('guide', 'true')
    //   })
    // },
    methods: {
      jump () {
        window.localStorage.setItem('guide', 'true')
        this.$router.push('/')
      }
    }
  }
</script>
<style>
  .guidePages{
    margin: 0 auto;
    max-width: 1000px;
    min-height: 100vh;
  }
  .swiper-demo-img img {
    width: 100%;
  }
  .black img{
    width: 100%;
  }
  .title{
    position: relative;
    top: 50%;
    text-align: center;
    color: red;
  }
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  .vux-slider > .vux-indicator, .vux-slider .vux-indicator-right {
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    margin-bottom: 4%;
    right: 50%!important;
  }
  .vux-icon-dot{
    width: 10px!important;
    height: 10px!important;
    border-radius: 8px!important;
    margin-left: 16px;
    margin-right: 15px;
  }
  .vux-button-group{
    position: absolute;
    top: 85%;
    left: 50%;
    margin-left: -50px;
    width: 100px;
  }
</style>
